<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>首页</title>
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/tab.css" />
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/home.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/footer.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/list.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/HorizontalList.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/swiper-3.4.0.min.css" />
		<style type="text/css">
		body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
		body{
				font:14px / 1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
				-webkit-text-size-adjust:none; -webkit-user-select: none;
				background: #FFFFFF;
			}
			
			ul,li{margin:0;padding:0}
			ul,li{-webkit-tap-highlight-color:rgba(0,0,0,0)}
			li,ul{list-style-type:none;}
			i{font-style:normal; font-weight:normal}
			.place::after{
				    display: inline-block;
				    content: "";
				    width: 1.3rem;
				    height: 1.3rem;
				    background: url(/static/app/img/132600537562106115.png) center center no-repeat;
				    background-size: 100%;
/* 				    transform: rotateZ(90deg); */
				    vertical-align: middle;
				    margin-left: .8rem; 
			}
			.container{
				width: 100%;
			}
			.fen{
				width: 100%;
			    height: 4.5rem;
			    line-height: 4.2rem;
			    color: #fff;
			    background: #f697b7;
			    padding-bottom: 2rem;
			}
			.fen_tital{
				display: inline-block;
			    width: 25%;
			    text-align: center;
			    font-size: 1.6rem;
			}
			.fen ul{
				font-size: 0;
			    width: 75%;
			    float: right;
			    margin-top: 1rem;
			    height: 75%;
			}
			.fen ul li{
				display: inline-block;
				width: 33.33%;
				height: 35px;
				line-height: 10px;
				font-size: 12px;
				text-align: center;
			}
			.fen ul li i{

			    display: inline-block;
			    width: 100%;
			    font-size: 2rem;
			}
			.fen ul li span{
			    margin-top: 1vh;
		    display: inline-block;
		    }
			.conter{
				margin-top: 39px;
				margin-bottom: 44px;
			}
			.swiper-container img{
				width: 100%;
			}
			.swiper-container .swiper-pagination{
				margin-bottom: -10px;
			}
			.lama img{
				width: 100%;
			}
			#sCity{
			height:30px;
			font-size: 16px;
			}
			.shihui{
			height: 160px;
			}
			/* .logo_text{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				color: #323232;
				font-size: 14px;
				margin-left: 6px;
			} */
			.logo_pic {
			    width: 30px;
			    height: 30px;
			    border-radius: 30px;
			    display: inline-block;
			    background: url(${BASE_PATH}/static/app/img/logo.png) no-repeat ;
			    margin-left: 10px;
			    margin-top: 3.5px;
			    float: left;
			}
			.caini_header{
			        color: #424242;
				    text-align: left;
				    margin-bottom: 3.2vh;
				    padding-left: .3rem;
				    border-bottom: none;
			}
		
			.caini_header::before {
			    display:inline-block;
			    content:"";
			    width: 1.9rem;
  				 height: 2.2rem;
			    background: url(${BASE_PATH}/static/app/img/201804101639.png) no-repeat;
			    background-size: cover;
			    vertical-align: -1vh;
			    margin-right: 2vw;
			}
			.discount{
			      display: flex;
			        padding: 1rem .5rem;
			    box-sizing: border-box;
			}
			.discount-tip{
			   flex:1;  
			  display: inline-block;
			  box-sizing: border-box;
			     
			}				
			  
			.discount-img img{
			  width:12vw;
			  vertical-align: baseline;
			}

			.discount-img  em{
			   font-style:normal;			  
			}
			.discount-img div{
			   display:inline-block;

			}
			.discount-img div i{
			  display:block;
			}
			.discount-img div em{
                display: block;
			   /*  width: 19vw; */
			        font-size: 12px;
			    color: #909090;
			}
			/*活动*/
			.activity-text{
			  padding-bottom: 1rem;
			  position: relative;
			}
			.activity-img img{
			      width: 15vw;
			}
			.activity-img{

			   padding-left:1rem;
			   box-sizing: border-box;
			   vertical-align: 1.5rem;
			}
			.activity-img, .activity-content{
		      	display: inline-block;
			    color: #646464;
			    font-size: 14px;
				line-height: 2rem;
			}
			.activity-img::after{
				display: inline-block;
			    content: "";
			    width: 2px;
			    height: 4.5rem;
			    background: url(/static/app/img/201804121738.png) no-repeat;
			    background-size: cover;
			    vertical-align: -1.8rem;
			    margin: 0 1.2rem;

			}
			.activity-content p{
				width:68vw;
			    overflow: hidden;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			}
            .activity-content p::before{
               display: inline-block;
               content:"";
			       width: 2.3rem;
			    height: 1.2rem;
               background: url(${BASE_PATH}/static/app/img/201804121849.png) no-repeat;
			   background-size: cover;
			   margin-right: 2vw;
			   vertical-align: -.1rem;
            }
            /*分割线*/
            .division{
              width:100%;
              height: .7rem;
              background: #fafafa;
              border-top:1px solid #e4e4e4;
              border-bottom:1px solid #e4e4e4;
              margin-bottom: 2vh;
            }
            /*入会礼/生产礼/生日礼 */
            .giftbag {
              position:fixed;
              top:0;
              width:100%;
              height:100%;
              overflow: hidden;
              background:rgba(62, 62, 62, 0.49);
              z-index: 999;  
              }
            .giftbag-content{
			    position: absolute;
			    left: 0;
			    right: 0;
			    top: 9rem;
			    width: 85%;
			    height: 73vh; 
			   /*  height: 38rem; */
			    margin: auto;
			    text-align: center;
			    background: #f57878;
			    border-radius: 18px;
			    box-sizing: border-box;
			/*     padding: 1rem 0 2rem; */
	  
            }
            .giftbag-content h2{
               color:#fad339;
               margin-top: 8vh;
               margin-bottom: 2vh;
        	padding: 0 .5rem;
            }
            .giftbag-content p{
                width: 92%;
   				 margin: auto;
                color: #fff;
			    text-align: left;
			    letter-spacing: .1rem;
			    padding-left: .2rem;
			    display: -webkit-box;
			    -webkit-box-orient: vertical;
			    -webkit-line-clamp: 2;
			    overflow: hidden;
            }
            .giftbag-content img{
                width: 92%;
                  /* width: 24rem; */
			    height: 14rem;
			    margin: 1rem 0;
			    border-radius: 6px;
            }
            .giftbag-btn{
			    position: absolute;
			    bottom: 5vh;
			    left: 0;
			    right: 0;
			    margin: auto;
            }
            .giftbag-btn-close img{
               width: 9rem;
               height: 4.2rem;
               margin-left: .1rem;
            }
            .giftbag-btn-confirm img{
                width: 12rem;
				height: 4.2rem;
				margin-left: 2rem;
            }
            .boby-child{
				position: absolute;
				width: 8rem;
				height: 8rem;
				border-radius: 50%;
				top: -4.5rem;
				left: 0;
				right: 0;
				margin: auto;
				background: #f57878; 
            }
            .boby-child img{                   
                width: 5rem;
			    height: 5.5rem;
			    margin-left: .5rem;
            }
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<div class="header">
					<span class="logo_pic"></span>
					<span class="logo_text">OK 妈咪</span>
					<span class="place" onclick="chooseCity(${cityId})">${cityName }</span>
					<input type="text" hidden="hidden" id="sCity" value="${cityId }"/>
				</div>
			</header>
			<div class="conter">
				<div class="fen">
					<span class="fen_tital">我的积分</span>
					<ul>
						<li><i class="goods">${sppoint}</i><span>商品积分</span></li>
						<li><i class="health">${jkpoint }</i><span>健康积分</span></li>
						<li><i class="educate">${jypoint }</i><span>教育积分</span></li>
					</ul>
				</div>
				<div class="swiper-container">
				    <div class="swiper-wrapper">
				    	<c:if test="${fn:length(adList) > 0}">
							<c:forEach var="ad" items="${adList}" varStatus="s">
								<div class="swiper-slide">
									<a href="${ad.link }"><img src="${FTP_PATH}${ad.thumb}" alt="" /></a>
								</div>
							</c:forEach>
						</c:if>
						<c:if test="${fn:length(adList) == 0}">
							<div class="swiper-slide"><img src="${BASE_PATH}/static/app/img/shouye-banner.png" class="lunbo-img"/></div>
						</c:if>
				    	
				    </div>
				    <div class="swiper-pagination"></div>
				</div>
				<!-- <div class="lama" onclick="lamagonglue();"><img src="${BASE_PATH}/static/app/img/lamagonglv.png"/></div>
					<div class="shihui">
						<span class="shihui_header">积分超实惠<i onclick="getmore();">更多</i></span>
						<ul id="shihui">
						</ul>
					</div> -->
					<!-- 积分超实惠 折扣-->
			<div class="activity">
				<div class="discount">
				    <div class="discount-tip"  onclick="getmore();">
				         <div class="discount-img">
				            <img src="${BASE_PATH}/static/app/img/201804121538.png">
				            <div>
				               <i >积分兑换 </i>
				               <em>积分超实惠</em>
				            </div>
				         </div>
				    </div>
				    <div class="discount-tip" onclick="discount()">
				         <div class="discount-img">
				            <img src="${BASE_PATH}/static/app/img/201804121838-1.png">
				            <div>
				               <i>积分折扣 <i>
				               <em>折扣超实惠</em>
				            </div>
				         </div>
				    </div>
				    <div class="discount-tip" onclick="benefit()">
				         <div class="discount-img" >
				            <img src="${BASE_PATH}/static/app/img/201804121538-2.png">
				            <div>
				              <i>惠商城<i>
				               <em>优惠有好礼</em>
				            </div>
				         </div>
				    </div>
				</div>	
				<div class="activity-text">
				   <a href="${BASE_PATH}/goods/doingList">
					   <div class="activity-img">
					      <img src="${BASE_PATH}/static/app/img/201804121641.png"/>
					   </div>
					   <div class="activity-content">
					   <c:if test="${fn:length(doingList) > 0}">
							<c:forEach var="adlist" items="${doingList}" varStatus="s">
								<p>${adlist.title}</p>
							</c:forEach>
						</c:if>
						<c:if test="${fn:length(doingList) == 0}">
							<p>暂无活动</p>
						</c:if>
					        
					        
					   </div>
				   </a>
				</div>
			</div>
			<hr class="division"/>
			<div class="caini">
				<span class="caini_header">畅销热品</span>
					<div id="recomGoodsList" class="am-g app-goods-list nin"></div>
			</div>
			</div>
			<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
				<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
			</div>
			<footer>
				<ul>
					<a href="${BASE_PATH}/index"><li class="text_on"><i class="shouye"></i>首页</li></a>
					<a href="${BASE_PATH}/goods/momsay"><li><i class="fenlei"></i>辣妈说</li></a>
					<%-- ${BASE_PATH}/goods/fenlei --%>
					<a href=" https://h5.youzan.com/v2/showcase/homepage?alias=1fo6ae813&sf=wx_menu"><li><i class="youxuan"></i>商城</li></a>
					<a href="${BASE_PATH}/order/list"><li><i class="dingdan"></i>订单</li></a>
					<a href="${BASE_PATH}/my"><li><i class="my"></i>我的</li></a>
				</ul>
			</footer>
		</div>
		
		<!-- 入会礼  -->
		<c:if test="${homeBag!=null || homeBag}">
			<div class="giftbag">
			     <div class="giftbag-content">
			     <div class="boby-child">
			           <img src="${BASE_PATH}/static/app/img/bobyChild.png"/ >		         
			     </div>
			      	<h2>${homeBag.title}</h2>
			         <img src="${FTP_PATH}${homeBag.thumb}" alt="" onerror="src='${BASE_PATH}/static/app/img/201804121641.png';"/>			         
	                 <P>${homeBag.content}</P>
				     <div class="giftbag-btn">
			        	<a href="javascript:" class="giftbag-btn-close">
				           <img src="${BASE_PATH}/static/app/img/201404271033.png"/>
			         	</a>
		         		<a href="javascript:homeJump(${homeBag.pushDateType},${homeBag.id});" class="giftbag-btn-confirm" >
	                         <img src="${BASE_PATH}/static/app/img/201404271032.png"/>
						</a>
						<input type="hidden" class="home-bag-hide" value="${homeBag.link}">						
				     </div>
			     </div>
			</div>
		</c:if>
		
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<script src="${BASE_PATH}/static/app/js/swiper-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/html" id="dataTpla">
		{{each list as item}}
			<li onclick="getmore();">
					<img src="${FTP_PATH}{{item.thumb}}" alt="" onerror="src='${BASE_PATH}/static/app/img/model.png';"/>
				<span class="jifen">{{item.sellpoint}}	{{if item.paytype==1}}商品积分{{else if item.paytype==2}}健康积分{{else if item.paytype==3}}教育积分 {{/if}}</span>
				<span class="price">¥{{item.marketPrice}}<i class="line"></i></span>
			</li>
		{{/each}}
	</script>
	<script type="text/html" id="dataTplb">
		{{each list as item}}
		<div class="am-u-md-4 am-u-lg-3 app-goods-item">
			<ul>
			<li onclick="detail({{item.id}});">
				<img src="${FTP_PATH}{{item.thumb}}" alt="" onerror="src='${BASE_PATH}/static/app/img/model.png';"/>
				<span class="tital">{{item.name}}</span>
				<span class="bot">

					{{if item.currency>0}}
					   <i class="caini_price" id="Type{{item.id}}" name="1">                           
                              ¥{{item.currency}}                           
                       </i>
					{{else if item.integral>0||item.integral==-1}}
					   <i class="caini_price" id="Type{{item.id}}" name="2">{{if item.integralType==1}}商品积分{{else if item.integralType==2}}健康积分{{else if item.integralType==3}}教育积分{{/if}}                         
                          {{if item.integral>0}}
                              {{item.integral}}
                           {{/if}}
                           {{if item.integral==-1}}
                              0
                           {{/if}}
                       </i>
					{{else if item.integCur_i!=0}}
					   <i class="caini_price" id="Type{{item.id}}" name="3">{{if item.integCur_iType==1}}商品积分{{else if item.integCur_iType==2}}健康积分{{else if item.integCur_iType==3}}教育积分{{/if}} {{item.integCur_i}} + ¥{{item.integCur_c}}</i>
					{{/if}}
					<span class="men"><i class="men_price"><a class="aline"></a>门市价:¥{{item.marketPrice}}</i><i class="men_jian">已售{{item.saleCount}}件</i></span>
				</span>
			</li>
			</ul>
 		</div>
		{{/each}}
	</script>
		<script type="text/javascript">
		 	var mySwiper0 = new Swiper ('.swiper-container', {
			    direction: 'horizontal',
			    loop: true,
			    pagination: '.swiper-pagination',
			    observer:true,//修改swiper自己或子元素时，自动初始化swiper
				observeParents:true//修改swiper的父元素时，自动初始化swiper
//				//autoplay: 3000,//可选选项，自动滑动
			}); 
			var width = $(".swiper-container img").width();
			$(".swiper-container img").height(width/2.5);
			var width = $(".lama img").width();
			$(".lama img").height(width/5);
			var width = $(".shihui ul li img").width();
			$(".shihui ul li img").height(width);
			var width = $(".caini ul li img").width();
			$(".caini ul li img").height(width);
			$(".caini ul li").height(width);
			//积分兑换 积分
			function getmore(){
				window.location.href="${BASE_PATH}/goods/list?type=2";
			}
			//积分折扣 积分+货币
			function discount(){
				window.location.href="${BASE_PATH}/goods/list?type=3";
			}
			//惠商城 货币
			function benefit(){
				window.location.href="${BASE_PATH}/goods/list?type=1";
			}
			function lamagonglue(){
			//	window.location.href="${BASE_PATH}/gonglue";
			window.location.href="http://okmami.bain.net.cn/OKmamiguide/home.html"
			}
			var loading = false ,pageNum = 0, totalPage = 1;
			$(query);
			function query(){
				var cityId=$("#sCity").val();  //获取选中的项
			    /*Kit.ajax.post("${BASE_PATH}/goods/pageByjf",{pageNum:1,pageSize:3,cityId:cityId},function(result){
					$("#shihui").append(template("dataTpla",result.object));
				//	changeWindow();
				});*/
				Kit.util.onPageEnd(function(){
					if(pageNum < totalPage && !loading && pageNum < 5){
						loading = true;
		            	$("#recomGoodsList").append("<div class=\"app-loading\">正在加载</div>");
		            	Kit.ajax.post("${BASE_PATH}/goods/pageBesell",{pageNum:pageNum+1,pageSize:10,cityId:cityId},function(result){
		            		$("#recomGoodsList").append(template("dataTplb",result.object));
							//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
							$(".app-goods-item","#recomGoodsList").removeClass("am-u-end").last().addClass("am-u-end");
							//图片延迟加载
							$("img.lazyload","#recomGoodsList").not(".lazyload-binded").lazyload({
								failurelimit : 100,
								effect : "show"
							}).addClass("lazyload-binded");
							$(".app-loading","#recomGoodsList").remove();
							pageNum = result.object.pageNumber;
							totalPage = result.object.totalPage;
			            	//重置加载标识
							loading = false;
						});
					}
				});
			}
			 1
			function detail(id){
				var Type=document.querySelector("#Type"+id);
				var type=Type.getAttribute("name");
				window.location.href="${BASE_PATH}/goods/jfdetail/"+id+"?type="+type;
			}
			function chooseCity(cityId){
				window.location.href="${BASE_PATH}/chooseCity/"+cityId;
			}
			/*礼包遮罩层*/

			(function(){
				var close=document.querySelectorAll(".giftbag-btn-close"),
				    giftbag=document.querySelectorAll(".giftbag"),
				    aIndex=0;
				    for(var i=0;i<close.length;i++){
				    	close[i].setAttribute("aIndex",i);
				    	close[i].onclick=function(){
				    		aIndex=this.getAttribute("aIndex");
				    		giftbag[aIndex].style.display="none";
				    		giftbag[aIndex].style.zIndex="-999";
				    		 Kit.ajax.post("${BASE_PATH}/my/closeBag",{id:'${homeBag.id}'},function(result){
								
				    		 });
				    	}
				    }
			}())
			//礼包领取
			function homeJump(a,b){
				 Kit.ajax.post("${BASE_PATH}/my/homeBag?type="+""+a+""+"&id="+""+b+"",function(result){
					if(result.flag==0){
						location.href=$(".home-bag-hide").val(); 						
					} 				
				});
			}
		</script>
		<script type="text/javascript">
		/*
		*实现微信浏览器返回并强制刷新效果
		*/
		//IOS上的方法
		$(function () {
			var isPageHide = false;
			window.addEventListener('pageshow', function () { 
				if (isPageHide) {
					window.location.reload();
					} 
				});
			window.addEventListener('pagehide', function () { isPageHide = true; });
			});

		
		//Android上的方法
		$(function () { 
			var needRefresh = sessionStorage.getItem("need-refresh");
			if(needRefresh){
				sessionStorage.removeItem("need-refresh"); location.reload(); 
				} });
		

		</script>
	</body>
</html>